<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="changeTab" type="border-card">
      <el-tab-pane v-for="item in dic[Enum.DicTypeOperator]" :key="item.id" :label="item.name"
        :name="String(item.id)">
        <el-form class="pageQuery" label-position="top">
          <div class="queryItem" v-for="(field, index) in list.search_field" :key="index">
            <el-form-item :label="field.title">
              <el-input v-if="field.type == 'input'" :placeholder="field.placeholder" v-model="list.search[field.key]"></el-input>

              <el-select v-if="field.type == 'select'" :placeholder="field.placeholder" :multiple="field.multiple" v-model="list.search[field.key]">
                <el-option v-for="(item, index) in  dic[field.dic]" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>

              <select-group v-if="field.type == 'select_group'" :list="dic[field.dic]" v-model="list.search[field.key]"></select-group>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="primary" @click="getListData">查询</el-button>
            <el-button :disabled="download.disabled"><download-excel :fetch="downExcel" :fields="download.header" :name="download.file_name">{{download.text}}</download-excel></el-button>
          </el-form-item>
        </el-form>

      </el-tab-pane>
    </el-tabs>


    <el-card>
      <el-table :data="list.items" v-loading="list.loading" style="margin-bottom: 10px" border v-fit-columns max-height="800">
        <el-table-column v-for="(field, index) in list.list_field" :key="index" :label="field.title" :prop="field.key" :width="field.width">
          <template slot-scope="scope">
            <div v-html="$api.status.cardStatus(scope.row.status, scope.row.status_name)" v-if="field.key == 'status_name'"></div>
            <div v-else>{{ scope.row[field.key] }}</div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="{row}">
            <div class="table-operation">
              <el-link type="primary" v-if="$api.buttonPower(70)" @click="detailOpen(row)">查看</el-link>
            </div>
          </template>
        </el-table-column>

        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>

      <myPaging :queryInfo="list.search" :getListData="getListData"></myPaging>
    </el-card>


    <el-drawer :visible.sync="detail_box.show" title="卡片详情" size="60%" custom-class="drawerWidth">
      <iot-card-detail :request="detail_box.request" v-if="detail_box.show" @close="detailClose"></iot-card-detail>
    </el-drawer>
  </div>
</template>

<script>
import IotCardDetail from "@/components/iotCard/card/cardDetail";
import SelectGroup from "@/components/reusableComponents/select_group";
export default {
  components: {SelectGroup, IotCardDetail},
  data() {
    return {
      user:{level: ''},
      activeName: '1',
      dic: [],
      list:{
        loading: false,
        search: {
          page: 1,
          size: 10,
          total: 0,

        },
        search_field: [
          {
            type: 'input',
            key: 'iccid',
            placeholder: '请输入iccid',
            title: 'iccid',
          },
          {
            type: 'input',
            key: 'msisdn',
            placeholder: '请输入查询号码',
            title: '电话号码',
          },
          {
            type: 'select',
            key: 'status',
            placeholder: '所有',
            title: '状态',
            dic: this.$api.Enum.DicTypeCardStatus
          },
          {
            type: 'select',
            key: 'agent_app_id',
            placeholder: '所有',
            title: '应用商',
            dic: this.$api.Enum.DicTypeResellerList
          },
          {
            type: 'select',
            key: 'agent_agency_id',
            placeholder: '所有',
            title: '代理商',
            dic: this.$api.Enum.DicTypeResellerList
          },
          {
            type: 'select',
            key: 'agent_retailer_id',
            placeholder: '所有',
            title: '零售商',
            dic: this.$api.Enum.DicTypeResellerList
          },
          {
            type: 'select',
            key: 'channel_id',
            placeholder: '所有',
            title: '渠道',
            dic: this.$api.Enum.DicTypechannelList
          },
          {
            type: 'select_group',
            key: 'group_id',
            placeholder: '所有',
            title: '套餐组',
            dic: this.$api.Enum.DicTypeComboGroupList,
            multiple: true
          },
        ],
        list_field: [
          {
            title: 'iccid',
            key: 'iccid',
            width: 160,
          },
          {
            title: '电话号码',
            key: 'msisdn',
            width: 140,
          },
          {
            title: '卡片类型',
            key: 'type_name',
            width: 100,
          },
          {
            title: '网络制式',
            key: 'net_service_name',
            width: 100,
          },
          {
            title: '渠道',
            key: 'channel_name',
            width: 140,
          },
          {
            title: '状态',
            key: 'status_name',
            width: 80,
          },
          {
            title: '实名状态',
            key: 'is_verified_name',
            width: 100,
          },
          {
            title: '应用商名称',
            key: 'agent_app_name',
            width: 160,
          },
          {
            title: '应用',
            key: 'app_name',
            width: 160,
          },
          {
            title: '代理商名称',
            key: 'agent_agency_name',
            width: 160,
          },
          {
            title: '零售商名称',
            key: 'agent_retailer_name',
            width: 160,
          },
          {
            title: '套餐组',
            key: 'group_name',
            width: 160,
          },
          {
            title: '获取时间',
            key: 'get_dt',
            width: 120,
          },
        ],
        items:[],
      },
      download: {
        text: '导出',
        file_name: '卡片明细导出.xls',
        disabled: false,
        header: {},
        search: {},
        items: [],
      },
      detail_box:{
        show: false,
        request:{
          id: 0,
          operator_key: 0,
          iccid: ''
        }
      },
    };
  },
  mounted() {
    this.$api.forbidHeader(this.list.search_field, this.list.list_field)
    this.user = JSON.parse(localStorage.getItem("userData"));
    if (this.user.setting.preference.card.operator_key){
      this.activeName = this.user.setting.preference.card.operator_key.toString()
    }
    this.changeTab()
  },
  methods: {
    getListData() {
      this.list.loading = true
      this.$api.card.cardList(this.list.search, res => {
        this.list.loading = false
        if (!res.status) {
          return this.$message.error(res.message);
        }
        this.list.items = res.data.list;
        this.list.search.total = res.data.page.total;
      });
    },
    detailOpen(row) {
      this.detail_box.show = true
      this.detail_box.request ={
        id: row.id,
        operator_key: this.list.search.operator_key,
        iccid: row.iccid,
      }
    },
    detailClose(level){
      this.detail_box.show = false
      this.detail_box.request = {}
      if (level === 1){
        return
      }
      this.getListData();
    },
    changeTab(tab) {
      this.$api.foundation.dicListExtendCache(
        [
          this.$api.Enum.DicTypeOperator,
          this.$api.Enum.DicTypeResellerList,
          this.$api.Enum.DicTypeCardStatus,
          this.$api.Enum.DicTypeOrderStatus,
          this.$api.Enum.DicTypechannelList,
          this.$api.Enum.DicTypeComboGroupList,
        ],
        {operator_key: Number(this.activeName)},
        res => {
          this.dic = res;
        }
      );
      this.list.search.operator_key = Number(this.activeName)
      this.getListData()
    },
    async downExcel() {
      if (this.download.disabled){
        return false
      }
      let handle = this.download

      console.log(this, this.download)
      handle.disabled = true
      handle.text = '数据导出中,请稍等.'
      Object.assign(handle.search, this.list.search)
      handle.file_name = '卡片-'+this.dic[this.$api.Enum.DicTypeOperator].filter((item)=>{return item.id== handle.search.operator_key})[0].name+'.xlsx'
      handle.header = {}
      handle.items = []
      handle.search.size = 500
      handle.search.page = 1
      this.list.list_field.forEach(item =>{
        if (item.key == "iccid" || item.key == "msisdn"){
          handle.header[item.title] = {field: item.key, callback: function(value){ return '\'' + value }}
        }else {
          handle.header[item.title] = item.key
        }
      })
      handle.items = this.getDownExcelData()
      handle.disabled = false
      handle.text = '导出'
      this.download = handle
      return this.download.items
    },
    getDownExcelData() {
      let list = [];
      let search = this.download.search;
      this.$api.card.cardList(this.download.search, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        list.push(... res.data.list)
        if ((search.total - search.page * search.size) < 0 || res.data.page.total < search.size) {

        } else {
          search.page += 1
          search.total = res.data.page.total;
          this.getDownExcelData()
        }
      },{async:false})
      return list
    },
  }
};
</script>

<style lang="less" scoped>
.el-tabs {
  margin-top: 20px;
}
.el-table .cell, .el-table th div {
  /* overflow: initial; */
}
</style>